import { useSearchParams, history } from '@umijs/max';
import Logo from '../components/Logo';
import styles from './index.less';
import { money } from '@/utils/money';
import { useEffect, useRef, useState } from 'react';
import { useRequest } from 'ahooks';
import { payOrder, pollingOrderStates } from '@/services/order';
import { message, Image, Button } from 'antd';
import { LeftOutlined } from '@ant-design/icons';

const pay = () => {
    const QRcode = require('qrcode')
    const [codeUrl, setCodeUrl] = useState('');

    const [searchParams] = useSearchParams();
    const orderStatusRef = useRef<any>(null)

    const [remain, setRemain] = useState(60);
    const remainRef = useRef<any>(60);

    const orderNo = searchParams.get('orderNo');
    const paymentType = searchParams.get('paymentType') || '';
    const payablePrice = searchParams.get('payablePrice');

    const payTypes = {
        "WECHAT": '微信支付',
    }
    const timeInterval = useRef<any>();

    const {data: code, loading} = useRequest(() => {
        return payOrder({
            orderNo,
            paymentType
        }).then(res => {
            if (res.code === 200) {
                QRcode.toDataURL(res?.data?.codeUrl, (err, url) => {
                    setCodeUrl(url)
                })
                timeInterval.current = setInterval(() => {
                    if (remainRef.current === 1) {
                        clearInterval(timeInterval.current);
                    }
                    remainRef.current = remainRef?.current - 1;
                    setRemain(remainRef.current)
                }, 1000)
                orderStatusRef.current = setInterval(() => {
                    pollingStatus()
                }, 2000)
            } else {
                message.warning(res.message)
            }
            return res.data;
        })
    },{
        refreshDeps: [orderNo, paymentType]
    });

    const pollingStatus = () => {
        pollingOrderStates({
            orderType: 1,
            businessNo: orderNo
        }).then((res) => {
            if (res?.data?.status === 1) {
                clearInterval(orderStatusRef.current);
                history.push('/userCenter/myOrder')
            } else if (res?.data?.status === 2) {
                clearInterval(orderStatusRef.current);
                message.warning('支付失败，请刷新页面重新支付！')
            }
        })
    }
    return (
        <div className={styles.page}>
            <div className={styles.top}>
                <Logo />
                <div className={styles.title}>
                    收银台
                </div>
            </div>
            <div className={styles.info}>
                <div>
                    订单提交成功，请尽快付款！订单编号：{orderNo}
                </div>
                <div style={{ fontWeight: 300, display: 'flex' }}>
                    应付总额： <div style={{ color: 'red', fontWeight: 600 }}>¥{money(payablePrice)}</div>
                </div>
            </div>
            <div className={styles.payIcon}>
                <div style={{ display: 'flex', color: '#666', alignItems: 'end' }}>
                    <div style={{ fontSize: 24, marginRight: 40 }}>
                        {payTypes?.[paymentType]}
                    </div>
                    <div>
                        距离二维码过期还剩 <span style={{ color: 'red' }}>{remain}</span> 秒，过期后请刷新页面获取二维码。
                    </div>
                </div>
                <div className={styles.image}>
                    <Image width={400} height={400} preview={false} src={codeUrl} />
                    <div style={{ width: '20px' }}></div>
                    <Image width={400} height={400} preview={false} src={require('@/assets/imgs/wechats.png')} />
                </div>
                <div className={styles.back}>
                    <Button color="primary" onClick={() => {
                        history.push('/userCenter/myOrder');
                    }} variant="link" ><LeftOutlined />返回订单中心</Button>
                </div>
            </div>
        </div>
    )
}

export default pay;